import React, { memo, useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import { shallowEqual, useSelector, useDispatch } from "react-redux";
import { ProfileWrapper, ProfileHeader, ProfileBody } from "./style";
import { Button } from "antd";
import { SettingOutlined, LeftOutlined } from "@ant-design/icons";
import LayoutCard from "@/components/layout-card";
import { getOtherUserInfoAction } from "./store/actionCreators";

export default memo(function OtherUser(props) {
  /*  const { avatar, nickName, allLove, schoolId, userId, content } =
    props.location.state; */
  const [isActive, setIsActive] = useState(true);
  const history = useHistory();
  const { otherUserInfo, myNote, myCollectNote } = useSelector(
    (state) => ({
      otherUserInfo: state.getIn(["otherUser", "otherUserInfo"]),
      myNote: state.getIn(["otherUser", "myNote"]),
      myCollectNote: state.getIn(["otherUser", "myCollectNote"]),
    }),
    shallowEqual
  );
  const dispatch = useDispatch();
  const { avatar, nickName, allLove, schoolId, userId, content } =
    otherUserInfo;
  useEffect(() => {
    dispatch(getOtherUserInfoAction(userId));
  }, [dispatch, userId]);

  const backToSearchIcon = () => {
    history.goBack();
  };
  return (
    <ProfileWrapper>
      <i className="backToSearchIcon" onClick={backToSearchIcon}>
        <LeftOutlined style={{ fontSize: "18px", color: "#fffffb" }} />
      </i>
      <ProfileHeader>
        <div className="header">
          <div className="picture">
            <img alt="" src={avatar} />
          </div>
          <div className="info">
            <div className="nickname">{nickName}</div>
            <div className="id">小柚号: {userId.substring(0, 10)}</div>
            {schoolId === "SWPU666" ? (
              <div className="age">
                <i />
                已认证
              </div>
            ) : (
              <div className="age">
                <i />
                未认证
              </div>
            )}
          </div>
        </div>
        <div className="content">{content}</div>
        <div className="footer">
          <div className="zan">
            <span>获赞数: </span>
            {allLove}
          </div>
          <div className="set">
            <Button ghost shape="round">
              待定
            </Button>
            <Button icon={<SettingOutlined />} shape="circle" ghost />
          </div>
        </div>
      </ProfileHeader>
      <ProfileBody>
        <div className="title-wrapper">
          <span
            className={["title-item ", isActive ? "active" : ""].join(" ")}
            onClick={(e) => setIsActive(true)}
          >
            笔记
          </span>
          <span
            className={["title-item ", isActive ? "" : "active"].join(" ")}
            onClick={(e) => setIsActive(false)}
          >
            收藏
          </span>
        </div>
        <div className="main">
          <LayoutCard data={isActive ? myNote : myCollectNote} />
        </div>
      </ProfileBody>
    </ProfileWrapper>
  );
});
